<script setup lang="ts">
import HyperText from "~/components/ui/HyperText.vue";
import {useListAnimate} from "~/server/utils";
import {CardBody, CardContainer} from "~/components/ui/card-3d";
import Inputer from "~/components/Inputer.vue";
import InteractveHoverButton from "~/components/ui/InteractveHoverButton.vue";
const topDesc = ref<HTMLElement>()
const personDesc = ref<HTMLElement>()
const nickNameInputer = ref<InstanceType<typeof Inputer>>()
const gsap = useNuxtApp().$gsap;
const commentDialogVis = ref(false);
const nickName = ref('');
const discussVal = ref('');

const descText = ref<string[]>([
    "黄河走东溟，白日落西海。",
    "逝川与流光，飘忽不相待。",
    "春容舍我去，秋发已衰改。",
    "人生非寒松，年貌岂长在。",
    "吾当乘云螭，吸景驻光彩。"
]);

function handleSendComment() {
  const val = unref(discussVal);
  const commenter = unref(nickName);
  // console.log(val,commenter)
  if(!val || !commenter) {
    VsNotification({
      progressAuto: true,
      color: 'danger',
      position: 'top-center',
      title: '校验错误',
      content:
          '【昵称】和【内容】必须填写！',
    })
    return
  }
  $fetch('/api/discuss/addMessage',{
    method:'post',
    body: {
      content: val,
      commenter: commenter
    }
  }).then(res => {
    VsNotification({
      progressAuto: true,
      color: 'success',
      position: 'top-center',
      title: '留言',
      content:
          '留言成功！',
    })
    nickName.value = '';
    discussVal.value = '';
    commentDialogVis.value = false;
  })
}
function dialogOpened(){
  nickNameInputer.value?.focus();
}

onMounted(()=> {
    nextTick(()=> {
      if(topDesc.value && personDesc.value){
        gsap.from(topDesc.value, {
          opacity: 0.2,
          duration: 1,
          y: '100%',
          scale: 0.6,
          ease: "power1.inOut",
        })
        gsap.from(personDesc.value, {
          x: '-500%'
        })
      }
    })
})
</script>

<template>
  <div>
    <ClientOnly>
      <div class="flex flex-col lg:flex-row md:w-10/12 m-auto justify-start pr-2 pl-2 gap-4" ref="topDesc">
        <div class="w-full lg:w-1/3" ref="personDesc">
          <CardContainer container-class="w-auto h-auto" style="justify-content: center;padding: 0">
            <CardBody class="w-auto h-auto justify-start">
              <n-avatar class="w-80 lg:w-96 h-40" src="https://file.atian.work/%C3%A3%C2%80%C2%90%C3%A5%C2%93%C2%B2%C3%A9%C2%A3%C2%8E%C3%A5%C2%A3%C2%81%C3%A7%C2%BA%C2%B8%C3%A3%C2%80%C2%91%C3%A5%C2%98%C2%BF%C3%A7%C2%8C%C2%AB-%C3%A7%C2%8C%C2%AB.png"></n-avatar>
            </CardBody>
          </CardContainer>
          <div>
            <div class="font-bold text-2xl">Exchar</div>
            <div class="text-gray-600">联系我</div>
            <n-space>
              <a href="https://github.com/Exchar" target="_blank" class="flex justify-start items-center">
                <n-avatar class="w-6 h-6 mr-2">
                  <i class="bx bxl-github" />
                </n-avatar>
                github
              </a>
              <a href="https://gitee.com/Exchar" target="_blank" class="flex justify-start items-center">
                <n-avatar class="w-6 h-6 mr-2" src="https://ts1.cn.mm.bing.net/th?id=ODLS.a0615180-18f5-480f-afb5-677d55fa12bb&w=32&h=32&qlt=90&pcl=fffffa&o=6&pid=1.2">
                </n-avatar>
                Gitee
              </a>
              <n-popover placement="top-start" trigger="hover">
                <template #trigger>
                            <span class="flex justify-start items-center">
                                            <n-avatar class="w-6 h-6 mr-2" src="https://ts1.cn.mm.bing.net/th?id=ODLS.09e832d7-ef24-4584-a650-cf0b841c49e9&w=32&h=32&qlt=90&pcl=fffffa&o=6&pid=1.2">
                                            </n-avatar>
                                            wx
                                        </span>
                </template>
                <n-image style="width: 260px;height:260px;" src="https://file.atian.work/%C3%A5%C2%BE%C2%AE%C3%A4%C2%BF%C2%A1%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87_20250219012501.jpg"></n-image>
              </n-popover>

              <a href="https://qm.qq.com/q/2j7jx4rZOU" target="_blank" class="flex justify-start items-center">
                <n-avatar class="w-6 h-6 mr-2" src="https://ts2.cn.mm.bing.net/th?id=OIP-C.pkFFs4tXz2qF3uscwiCwSQHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2">
                </n-avatar>
                qq
              </a>
            </n-space>
          </div>
        </div>
        <div class="lg:w-2/3 w-full flex justify-center flex-col">
          <div class="flex flex-col justify-center items-center">
            <HyperText class="font-bold text-3xl m-auto" v-for="item in descText" :key="item" :text="item"></HyperText>
          </div>
        </div>
      </div>
      <div class="flex justify-center mt-28">
        <InteractveHoverButton
            class="w-56"
            text="说点想说的话吧"
            @click="commentDialogVis = true"
        />
      </div>
      <!--      写留言-->
      <vs-dialog v-model="commentDialogVis" width="450px" not-center @opened="dialogOpened">
        <template #header>
          <h4 class="not-margin">想说什么......</h4>
        </template>

        <div class="con-content">
          <div class="flex justify-start align-middle items-center mb-3">
        <span class="mb-0 whitespace-nowrap">
          你的昵称：
        </span>
            <Inputer
                ref="nickNameInputer"
                v-model="nickName"
                type="textarea"
                placeholder="吐个槽吧"
                show-count
                :maxlength="20"
                class="mb-0 flex-auto"
                :autosize="{
        minRows: 3,
      }"
            />
          </div>
          <div class="flex justify-start align-middle items-center mb-3">
        <span class="mb-0 whitespace-nowrap">
          留言内容：
        </span>
            <Inputer
                v-model="discussVal"
                type="textarea"
                placeholder="吐个槽吧"
                show-count
                :maxlength="500"
                class="mb-0 flex-auto"
                :autosize="{
        minRows: 3,
      }"
            />
          </div>
        </div>

        <template #footer>
          <div class="con-footer flex justify-end">
            <vs-button type="floating" @click="handleSendComment">
              保存
            </vs-button>
            <vs-button color="danger" type="floating" @click="commentDialogVis = false">
              取消
            </vs-button>
          </div>
        </template>
      </vs-dialog>
    </ClientOnly>
  </div>
</template>

<style lang="css" scoped></style>